<template>
  <div :class="['Atable', { 'big-slash': hasBigSlash }]">
    <el-table
      ref="AtableComponent"
      class="table"
      :data="tableData"
      :load="loadFn"
      :row-key="rowKey"
      :height="height"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      @expand-change="$emit('expandChange', $event)"
      lazy
      :stripe="stripe"
    >
      <template v-for="(item, index) in tableModel">
        <el-table-column
          v-if="item.type ==='expand'"
          :key="item.prop || index"
          :type="item.type"
        >
          <template slot-scope="scope" v-if="item.slot">
              <slot
                :name="item.slot"
                :row="scope.row"
                :value="scope.row[item.prop]"
                :index="scope.$index"
                :scope="scope"
              />
          </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.type"
          :key="item.prop || index"
          :type="item.type"
          :fixed="item.fixed"
          :label="item.slashLabel || item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
          :show-overflow-tooltip="!item.hideOver"
        >
        </el-table-column>
        <el-table-column
          v-else
          :key="item.prop || index"
          :fixed="item.fixed"
          :prop="item.prop"
          :label="item.slashLabel || item.label"
          :width="item.width"
          :min-width="item.minWidth"
          :align="item.align || 'center'"
          :show-overflow-tooltip="!item.hideOver"
        >
          <el-table-column
            v-if="item.firstSlash"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align || 'center'"
          />
          <template slot="header" slot-scope="scope">
            <template v-if="item.headSlot">
              <slot :name="item.headSlot" :scope="scope" />
            </template>
            <template v-else>
              {{ scope.column.label }}
            </template>
          </template>
          <template slot-scope="scope">
            <template v-if="item.slot">
              <slot
                :name="item.slot"
                :row="scope.row"
                :value="scope.row[item.prop]"
                :index="scope.$index"
                :scope="scope"
              />
            </template>
            <template v-else>
              <span>{{
                item.render
                  ? item.render(scope.row, scope.row[item.prop], scope)
                  : formateLabel(scope.row[item.prop])
              }}</span>
            </template>
          </template>
        </el-table-column>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
    },
    tableModel: {
      type: Array,
      default: () => [],
    },
    rowKey: {
      type: String,
    },
    loadFn: {
      type: Function,
    },
    height: {
      type: String || Number,
    },
    stripe: {
      type: Boolean,
      default: true,
    },
    hasBigSlash: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {
    getTableModel() {
      let newTableModel = this.tableModel.filter((item) => item.show !== false);
      return newTableModel.map((item) => {
        let resObj = {
          ...item,
        };
        return resObj;
      });
    },
    formateLabel() {
      return (label) => {
        return label === undefined || label === '' ? '' : label;
      };
    },
  },
  methods: {
    toggleRowExpansion(row, expanded) {
      this.$refs.AtableComponent.toggleRowExpansion(row, expanded);
    },
    test(scope) {
      console.log(scope);
    },
  },
};
</script>

<style lang="scss" scoped>
.Atable {
  position: relative;
  &.big-slash::after {
    content: '';
    position: absolute;
    top: 0px;
    z-index: 999;
    width: 296px;
    height: 1px;
    background-color: grey;
    opacity: 0.2;
    transform-origin: 0 0;
    transform: rotate(19deg); /*调整斜线的角度*/
  }
  &.big-slash {
    ::v-deep .el-table {
      thead {
        color: #00162a;
        font-weight: 700;
        th {
          height: 50px !important;
          padding: 0px;
        }
        th:nth-of-type(1) {
          border-bottom: none;
          border-right: none;
          background: #fff;
        }
        th:nth-of-type(2) {
          border-bottom: none;
          background: #fff;
        }
      }
      tbody {
        tr:not(tr:first-of-type) {
          td:nth-of-type(1) {
            background: #e4e8f2;
            span {
              font-weight: 600 !important;
            }
            span:not(.el-tag) {
              color: #00162a !important;
            }
          }
        }
        tr:nth-of-type(1) {
          td:nth-of-type(1) {
            border-right: none;
            span {
              color: #00162a !important;
              font-weight: 600 !important;
            }
          }
        }
      }
    }
  }
}

/*::v-deep 这里主要的作用就是用来强制修改element默认的样式*/
::v-deep .el-table thead.is-group th {
  padding: 0px;
}

::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type {
  border-bottom: none; /*中间的横线去掉*/
}

::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type div.cell {
  text-align: right; /*上边文字靠右*/
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type div.cell {
  text-align: left; /*下边文字靠左*/
}
/*核心代码*/
::v-deep .el-table thead.is-group tr:first-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100px; /*斜线的长度*/
  top: 0;
  left: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-43deg); /*调整斜线的角度*/
  transform: rotate(-70deg); /*调整斜线的角度*/
  -webkit-transform-origin: top;
  transform-origin: top;
}

::v-deep .el-table thead.is-group tr:last-of-type th:first-of-type:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 100px; /*斜线的长度*/
  bottom: 0;
  right: 0;
  background-color: grey;
  opacity: 0.2;
  display: block;
  transform: rotate(-45deg); /*调整斜线的角度*/
  transform: rotate(-70deg); /*调整斜线的角度*/
  -webkit-transform-origin: bottom;
  transform-origin: bottom;
}
::v-deep .el-table thead.is-group th {
  height: 27.4px;
}
</style>
